<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

import MapContainer from '@/components/MapContainer.vue';

const graph1 = ref();
const graph3 = ref();
const graph4 = ref();

onMounted(() => {
    const echart1 = echarts.init((graph1.value));
    const option1 = {
        color: ['skyblue'],
        title: {
            text: 'ECharts 入门示例'
        },
        // 设置坐标轴与容器的距离
        grid: {
            left: '0%',
            right: '4%',
            bottom: '3%',
            containLabel: true  // 是否显示刻度值
        },
        tooltip: {
            trriger: 'item'
        },
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
            axisTick: {
                show: true,
                alignWithLabel: true
            },
            axisLabel: {
                color: 'rgba(255,255,255,.6)'
            },
            // 坐标轴样式
            axisLine: {
                show: false
            }
        },
        yAxis: {
            axisTick: {
                show: true,
                alignWithLabel: true       // 刻度线与标签对齐
            },
            axisLabel: {
                color: 'rgba(255,255,255,.6)'
            },
            // 坐标轴样式
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)',
                    width: 2   // y轴宽度
                },

            },
            // 分隔线设置
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)',
                    width: 2
                }
            }
        },
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                barWidth: '35%',
                // 柱子设置
                itemStyle: {
                    borderRadius: 5
                }
            }
        ]
    };
    echart1.setOption(option1);

    const echart2 = echarts.init(document.querySelector('#graph2'));
    const option2 = {
        // 设置线条颜色
        // color:[],
        // 图的标题
        title: {
            text: 'Stacked Line'
        },
        // 提示框
        tooltip: {
            trigger: 'axis'  // 触发方式，坐标轴。
        },
        // 图例
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
            right: '5%',  // 图例位置
            textStyle: {
                color: 'rgba(255,255,255,.6)'
            }
        },
        // 设置坐标轴与容器的距离
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true  // 是否显示刻度值
        },
        // 工具，可另存为图片等功能
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        // x轴
        xAxis: {
            type: 'category',
            boundaryGap: false,     // 线条与y坐标轴是否有缝隙
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLabel: {
                color: 'rgba(255,255,255,.6)'
            }
        },
        // y轴
        yAxis: {
            type: 'value',
            axisLabel: {
                color: 'rgba(255,255,255,.6)'
            }
        },
        // 数据
        series: [
            {
                name: 'Email',
                type: 'line',
                stack: 'Total',    // 数据堆叠，相同stack的同类目轴，后以线的值在前一个值的基础上加上自身的值
                data: [120, 132, 101, 134, 90, 230, 210],
                smooth: true
            },
            {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310],
                smooth: true
            },
            {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410],
                smooth: true
            },
            {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320],
                smooth: true
            },
            {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                smooth: true
            }
        ]
    };
    echart2.setOption(option2);

    const echart3 = echarts.init(graph3.value);
    const myColor = ['pinkred', 'orange', 'yellow', 'green', 'skyblue', 'purple'];
    const option3 = {
        color: ['skyblue', '#fffa'],
        title: {
            text: 'World Population'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            show: false,
        },
        yAxis: [{
            type: 'category',
            data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
            axisLabel: {
                color: 'rgba(255,255,255,.5)',
            },
            axisTick: {
                show: false      // 刻度线不显示
            },
            axisLine: {
                show: false      // y轴不显示
            },
        }, {
            // 第2组标签
            type: 'category',
            data: [700000, 700000, 700000, 700000, 700000, 700000],
            axisLabel: {
                color: 'rgba(255,255,255,.5)',
            },
            axisTick: {
                show: false      // 刻度线不显示
            },
            axisLine: {
                show: false      // y轴不显示
            },
        }],
        series: [
            {
                name: '人数',
                type: 'bar',
                data: [1, 20, 25, 30, 40, 100],
                itemStyle: {
                    borderRadius: 20,
                    // 通过函数设置柱子颜色
                    color: function (params) {
                        // params：柱子对象
                        return myColor[params.dataIndex];
                    }
                },
                barWidth: '35%',
                barCategoryGap: '50',      // 同系列柱子间距,
                // 图形上的文本标签
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '{c}%'
                },
                // 等级
                yAxisIndex: 0

            }, {
                name: '框',
                type: 'bar',
                data: [100, 100, 100, 100, 100, 100],
                itemStyle: {
                    borderRadius: 20,
                    borderWidth: 2,
                    borderColor: 'green'
                },
                barWidth: '33%',
                barCategoryGap: '50',
                yAxisIndex: 1
            }
        ]
    };
    echart3.setOption(option3);


    const echart4 = echarts.init(graph4.value);
    const option4 = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center',
            textStyle: {
                color: 'rgba(255,255,255,.6)',
                fontSize: 13
            },
            // 图标宽、高
            itemWidth: 12,
            itemHeight: 12
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],        // 内圆半径、外圆半径。百分比是相对容器宽度来说
                avoidLabelOverlap: false,

                itemStyle: {
                    borderRadius: 5,
                    borderColor: '#fff',
                    borderWidth: 1
                },
                // 文字标签设置
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                // 文字与图的连接线设置
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    };
    echart4.setOption(option4);
})

</script>

<template>
    <div id="graph-container">
        <el-card class="card">
            <span>柱状图</span>
            <div id="graph1" ref="graph1"></div>
        </el-card>

        <el-card class="card">
            <span>柱状图-y轴</span>
            <div id="graph3" ref="graph3"></div>
        </el-card>

        <el-card class="card">
            <span>折线图</span>
            <div id="graph2"></div>
        </el-card>

        <el-card class="card">
            <span>饼状图</span>
            <div id="graph4" ref="graph4"></div>
        </el-card>
    </div>

    <MapContainer />
</template>

<style lang="css" scoped>
#graph-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.card {
    background-color: dodgerblue
}

#graph1,
#graph3,
#graph4 {
    height: 300px;
    width: 500px;
}

#graph2 {
    height: 400px;
    width: 800px;
}
</style>